<template>
  <div>
    <div class="delayTable" v-show="visible">
      <!-- 延期框 -->
      <div v-show="notShow">
        <f-form ref="form" :model="delayform" label-width="80px">
          <h4 class="title">延期申请</h4>

          <form-item label="截止时间" class="ditem">
            <form-col :span="12">
              <form-picker
                type="datetime"
                placeholder="截止时间"
                v-model="delayform.deferDate"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                style="width: 150%"
              ></form-picker>
            </form-col>
          </form-item>

          <form-item label="延期理由" class="ditem">
            <form-input
              type="textarea"
              v-model="delayform.reason"
              resize="none"
              style="width: 100%"
            ></form-input>
          </form-item>

          <form-item class="ditem">
            <el-button type="primary" @click="onSubmit" class="dbutton"
              >申请</el-button
            >

            <el-button class="dbutton" @click="cancel">关闭</el-button>
          </form-item>
        </f-form>
      </div>
      <!-- 验收框 -->
      <div v-show="isShow">
        <f-form
          :model="userformation[0]"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <h4 class="title">验收申请</h4>

          <form-item label="管理员姓名">
            <el-select v-model="teacher" placeholder="请选择管理员">
              <el-option
                :value="pep.username"
                :label="pep.username"
                v-for="(pep, index) in manager"
                :key="index"
              ></el-option>
            </el-select>
          </form-item>

          <form-item label="验收时间">
            <form-col :span="11">
              <form-picker
                type="datetime"
                placeholder="验收时间"
                v-model="checkouttime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                style="width: 117%"
              ></form-picker>
            </form-col>
          </form-item>

          <form-item>
            <el-button
              type="primary"
              @click="
                submitForm(userformation[0].id, userformation[0].username)
              "
              >发起验收</el-button
            >

            <el-button @click="cancel">取消</el-button>
          </form-item>
        </f-form>
      </div>
      <!-- 修改密码 -->
      <div v-show="updatapass" class="updatapass">
        <span class="title">修改密码</span>
        <div class="updataContent">
          <f-form
            :label-position="labelPosition"
            label-width="100px"
            :model="updatadata"
          >
            <form-item label="用户名">
              <form-input v-model="updatadata.name"></form-input>
            </form-item>
            <form-item label="原密码">
              <form-input
                type="password"
                v-model="updatadata.password"
                @blur="oldpassword"
              ></form-input>
            </form-item>
            <form-item label="新密码">
              <form-input
                type="password"
                v-model="updatadata.npassword"
              ></form-input>
            </form-item>
            <form-item label="请重复新密码">
              <form-input
                type="password"
                v-model="updatadata.rpassword"
                @blur="checked"
              ></form-input>
            </form-item>
          </f-form>
          <form-row>
            <el-button
              type="primary"
              plain
              @click="updatas"
              :disabled="!able || !able1"
              >修改密码</el-button
            >
            <el-button type="info" plain @click="cancel">取消</el-button>
          </form-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import { mapState } from "vuex";
export default {
  name: "Application",
  inject: ["reload"],
  data() {
    return {
      //验收表单

      show: this.true,

      checkformation: "",

      checkouttime: "",

      teacher: "",

      showstatus: false,

      manager: [],

      // 延期表单

      delayform: {
        userId: "",

        username: "",

        customspassName: "",

        deferDate: "",

        reason: "",
      },
      //修改密码
      labelPosition: "right",
      updatadata: {
        name: this.$store.state.LoginData.userformation[0].username,
        password: "",
        npassword: "",
        rpassword: "",
      },
      able: false,
      able1: false,
    };
  },
  computed: {
    ...mapState("LoginData", ["userformation"]),
  },

  props: ["visible", "customspassName", "isShow", "notShow", "updatapass"],

  methods: {
    //提交延期申请

    onSubmit() {
      let delayObj = {};

      for (var k in this.delayform) {
        delayObj[k] = this.delayform[k];
      }

      delayObj.userId = this.$store.state.LoginData.userformation[0].id;

      delayObj.username = this.$store.state.LoginData.userformation[0].username;

      delayObj.customspassName = this.customspassName;

      let url = "user/postpone";

      this.delayProject(url, delayObj);

      this.$emit("update:visible", false);
    },

    // 取消框

    cancel() {
      this.$emit("update:visible", false);
    },

    // 提交验收申请

    submitForm(id, name) {
      let obj = {};

      obj.userId = id;

      obj.username = name;

      obj.customspassName = this.customspassName;

      obj.managerName = this.teacher;

      obj.appointmentTime = this.checkouttime;
      let url = "user/checkAcceptance";

      if (
        obj.customspassName &&
        obj.managerName &&
        obj.appointmentTime &&
        this.showstatus == false
      ) {
        this.sendCheck(url, obj);
      } else {
        this.$message.error("信息错误，请再次核对信息", this.sucess());
        return;
      }
    },
    //验证两次密码是否一致
    checked() {
      if (this.updatadata.npassword != this.updatadata.rpassword) {
        this.$message.error("两次密码不一致", this.sucess());
      } else {
        this.able = true;
      }
    },
    //判断原来的密码是否正确
    oldpassword() {
      let id = this.$store.state.LoginData.userformation[0].id;
      this.$http({
        url: `user/selectById?id=${id}`,
        method: "get",
      }).then(({ data }) => {
        if (data.flag) {
          if (this.updatadata.password != data.data.password) {
            this.$message.error("输入的原密码不正确!", this.sucess());
          } else {
            this.able1 = true;
          }
        }
      });
    },
    /* 修改密码 */
    updatas() {
      let obj = {};
      obj.id = this.$store.state.LoginData.userformation[0].id;
      obj.password = this.updatadata.npassword;
      this.$http({
        url: "user/updatePassword",
        method: "post",
        data: qs.stringify(obj),
      }).then(({ data }) => {
        if (data.flag) {
          this.$message(
            {
              message: "修改密码成功",
              type: "success",
            },
            this.sucess(),
            this.$emit("update:visible", false),
            (this.updatadata.password = ""),
            (this.updatadata.npassword = ""),
            (this.updatadata.rpassword = "")
          );
        } else {
          this.$message.error("修改密码失败", this.sucess());
        }
      });
    },
  },

  mounted() {
    this.$http({
      url: "manager/selectAllManager",
      method: "get",
    }).then(({ data }) => {
      if (data.flag) {
        this.manager = data.data;
      }
    });
  },
};
</script>
<style lang="less" scoped>
.delayBackground {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 98;

  background-color: rgba(0, 0, 0, 0.5);
  .delayTable {
    position: absolute;

    left: 50%;

    top: 45%;

    transform: translate(-50%, -50%);

    width: 500px;

    /* height: 100%; */

    padding: 23px 20px;

    background-color: white;

    border-radius: 8px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

    box-sizing: border-box;

    z-index: 9999;
    .updatapass {
      height: 300px;
      .title {
        display: block;
        text-align: left;
        padding-bottom: 10px;
        font-size: 16px;
        font-weight: 700;
        border-bottom: 1px solid #ccc;
      }
      .updataContent {
        position: relative;
        /deep/ .el-form-item {
          margin-bottom: -9px;
        }
        /deep/ .el-input__inner {
          width: 96%;
        }
        /deep/ .el-form-item__label {
          color: #121316;
        }
        /deep/.el-row {
          position: relative;
          margin-top: 15px;
          text-align: center;

          box-sizing: border-box;
        }
      }
    }
  }
}
.title {
  text-align: center;

  margin-top: 0;

  margin-bottom: 10px;
}

.delayTable /deep/.el-input__prefix {
  left: 12px;
}

.ditem {
  margin-top: 20px;
}

.dbutton {
  width: 25%;

  height: 40px;

  margin-right: 20px;
}
</style>